<template>
  <div class="step-box">
    <div v-if="isShowFlag === 'one'">
      <el-row :gutter="20" class="page-box">
        <el-col :span="24" style="padding: 3% 10% 20px;">
          <p class="padding-line-height">*客服：您好，请问您是否为<span class="font-weight">{{ customerCardInfo.customerName }}</span>本人？</p>
          <p class="padding-line-height">客户：是</p>
          <p class="padding-line-height">*客服：请问您是否自愿在本行激活银行卡功能/开通社保卡银行账户功能？</p>
          <p class="padding-line-height">请问是否由您代理<span class="font-weight">{{ customerCardInfo.customerName }}</span>在本行激活银行卡功能/开通社保卡银行账户功能？（代理）</p>
          <p class="padding-line-height">客户：是</p>
          <p class="padding-line-height">*客服：请确认您提供的激活申请资料是否真实、有效、完整、合法、准确？</p>
          <p class="padding-line-height">客户：是</p>
          <p class="padding-line-height">*客服：请问您是否已认真阅读告知书及相关责任条款，理解、接受全部内容并自愿受法律约束。</p>
          <p class="padding-line-height">客户：是</p>
          <p class="padding-line-height">*客服：银行账户严禁出租、出借、出售、购买，违者将按相关账户管理制度规定，5年内暂停个人账户非柜面业务、支付账户所有业务，不得新开立账户，同时您的个人信息将被移送金融信用信息基础数据库并向社会公布。请问您是否知晓？</p>
          <p class="padding-line-height">客户：是或已知晓</p>
          <p class="padding-line-height">客服：您此次激活的社保卡不支持办理银联等业务，如<span class="font-weight">ATM存取款</span>、<span class="font-weight">POS机刷卡</span>、<span class="font-weight">绑定苏E行</span>，如需开通此类业务，请您本人携带<span class="font-weight">身份证</span>和<span class="font-weight">卡介质</span>至银行柜面或者超柜办理“<span class="font-weight">社保卡IC卡有效期获取</span>”。——界面大字回显这些关键词。——激活社保卡时需要告知客户</p>
          <p class="padding-line-height">客户：是或理解</p>
          <p class="padding-line-height">（原因：每张银行卡都有有效期，因社保卡直接从社保中心发放，未在银行录入信息，所以无法校验有效期，需在柜面读取卡芯片信息，读取）</p>
        </el-col>
        <el-col :span="24" style="padding: 0 10%;">
          <el-col><h4>客户签名</h4></el-col>
          <el-col class="signNameBox mt10">
            <el-col style="width: 100%;height: 100%;" class="txt-center"><h2 v-if="cardAssignFlag">客户签名区</h2><img v-if="!cardAssignFlag" style="width: 100%;" :src="cusSignBase64" alt=""></el-col>
          </el-col>
        </el-col>
        <el-col class="view-bottom">
          <el-row :gutter="20">
            <el-col :span="12" class="txt-right">
              <el-button type="primary" @click="sendAssignClick"><span v-text="assignHtml" /></el-button>
            </el-col>
            <el-col :span="12" class="txt-left">
              <el-button type="primary" @click="nextStep2">确认</el-button>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
    <div v-else-if="isShowFlag === 'two'" class="mt5 custInfo-box">
      <el-row class="view-header">卡激活业务确认单</el-row>
      <el-row class="view-middle">
        <BizCertForm :option="bizCertOption" :data="bizCertData" />
      </el-row>
      <el-row class="view-bottom">
        <el-row :gutter="20">
          <el-col :span="12" class="txt-right">
            <el-button type="primary" @click="bizCertFail">拒绝</el-button>
          </el-col>
          <el-col :span="12" class="txt-left">
            <el-button type="primary" @click="bizCertSuccess">通过</el-button>
          </el-col>
        </el-row>
      </el-row>
    </div>
    <div v-else-if="isShowFlag === 'three'" class="mt5 custInfo-box">
      <el-row class="view-box">
        <el-row class="view-header">认证结果</el-row>
        <el-row>
          <el-row class="photo-box">
            <div class="success-photo center">
              <img src="assets/theme/img/viceoBiz/success.png" alt="">
            </div>
            <el-row class="photo-title" style="margin: 10px 0px"><h2>认证成功</h2></el-row>
            <el-row class="padding-line-height txt-center">渠道编号：{{ vqid }}</el-row>
            <el-row class="padding-line-height txt-center">流水号：{{ videoSerialId }}</el-row>
            <el-row class="padding-line-height txt-center">dockID：{{ sessionId }}</el-row>
          </el-row>
        </el-row>
        <el-row class="view-bottom" />
      </el-row>
    </div>
    <div v-else-if="isShowFlag === 'four'" class="mt5 custInfo-box">
      <el-row class="view-box">
        <el-row class="view-header">认证结果</el-row>
        <el-row>
          <el-row class="photo-box">
            <div class="success-photo center">
              <img src="assets/theme/img/viceoBiz/cardFail.png" alt="">
            </div>
            <el-row class="photo-title" style="margin: 10px 0px"><h2>认证失败</h2></el-row>
            <el-row class="padding-line-height txt-center">失败原因：{{ reasonDescribe }}</el-row>
          </el-row>
        </el-row>
        <el-row class="view-bottom" />
      </el-row>
    </div>
    <div v-else-if="isShowFlag === 'five'" class="mt5 custInfo-box">
      <el-row class="view-header">交易结束</el-row>
      <el-row class="">
        <el-row class="photo-box">
          <div class="exceed-photo">
            <img src="assets/theme/img/viceoBiz/ending.png" alt="">
          </div>
          <el-row class="photo-title">交易结束</el-row>
        </el-row>
      </el-row>
      <el-row class="view-bottom" />
    </div>
    <el-dialog title="凭证预览" :visible.sync="dialogVisible" top="20px" width="95%">
      <el-scrollbar style="height: 500px;">
        <img style="width: 100%" :src="bizCertUrl" alt="">
      </el-scrollbar>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="bizFromConfirmAction">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="拒绝申请" :visible.sync="dialogFormVisibleFail" append-to-body width="70%">
      <el-row>
        <el-input
          v-model="failReason"
          type="textarea"
          :rows="4"
          placeholder="请输入拒绝原因……"
          resize="none"
        />
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button style="margin-right: 10px;" @click="dialogFormVisibleFail = false">取 消</el-button>
        <el-button type="primary" @click="bizCertFailClick">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import $ from 'jquery'
import Axios from 'axios'
import html2canvas from 'html2canvas'
import BizCertForm from '@/views/videoBiz/phoneBank/common/bizCertForm'
import {
  uploadFile,
  submitBizCert,
  imgTransBase64,
  socialCardActive,
  onlinePayOpen,
  saveTransPipeline,
  submitBizForm
} from '@/api/videoBiz/videoBiz'

export default {
  name: 'CardActiveVideo',
  components: {
    BizCertForm
  },
  data() {
    return {
      bankName: '江苏苏州农村商业银行股份有限公司',
      isShowFlag: 'one',
      cardAssignFlag: true,
      assignHtml: '签名',
      customerCardInfo: {},
      dialogVisible: false,
      bizCertUrl: '',
      frontName: '',
      reverseName: '',
      cusSceneName: '',
      bizCertName: '',
      cardStateMent: '',
      frontCardPhoto: '',
      frontBase64: 'assets/theme/img/viceoBiz/frontPhoto.png',
      reverseBase64: 'assets/theme/img/viceoBiz/reversePhoto.png',
      cusSceneBase64: 'assets/theme/img/viceoBiz/perpr.png',
      cusSignBase64: '',
      frontCardBase64: '',
      reverseCardBase64: '',
      bizCertData: {},
      bizCertOption: {},
      // 视频流水号
      videoSerialId: '',
      bizCertSeqNo: '',
      vqid: '',
      // 卡激活开通标志（0:未开户未激活,1:已开户未激活,2:已开通已激活）
      // khflag: '',
      failReason: '',
      dialogFormVisibleFail: false,
      cardType: '',
      cardActiveFlag: false,
      tranDate: '',
      tranTime: '',
      atmOpenTransfer: false,
      payResult: false,
      sessionId: '',
      reasonDescribe: ''
    }
  },
  created() {

  },
  mounted() {
    /** ******************************** 手机银行交互信令 ****************************************/
    const self = this
    self.bizCertOption = window.videoOptions.openHouseVideoOption.phoneBankCardActiveOption
    // 工作台结束会话
    window.eventEmitter.$on('EventVideoChatDone', () => {
      Constants.ModelChat = {}
      const biztype = sessionStorage.getItem('businessType')
      if (biztype == '卡激活') {
        self.activeName = 'third'
        window.ctpMenuOption.home.redirectName = 'phoneBankCardActive'
        self.resetGlobalVarible()
        self.isShowFlag = 'one'
        self.nextStep(0)
      }
    })
    // 视频进线
    window.eventEmitter.$on('EventPhoneBankCardRing', (data) => {
      console.log(JSON.stringify(data))
      self.resetGlobalVarible()
      self.isShowFlag = 'one'
      self.nextStep(0)
      self.customerCardInfo = data.customerInfo
      self.sessionId = Constants.ModelChat.sid
      self.cardType = data.customerInfo.cardType
      self.saveTransPipelineFun()
      sessionStorage.setItem('businessType', data.customerInfo.businessType)
    })
    // 收到客户签名
    window.eventEmitter.$on('EventCardGetBizSign', (data) => {
      // 客户签名照片
      if (data.cusSignCard) {
        imgTransBase64(data.cusSignCard).then(response => {
          self.cardAssignFlag = false
          self.cusSignBase64 = response.data
          self.assignHtml = '重新签名'
        }).catch(error => {
          console.log(error)
        })
      }
    })
    // 收到面签业务申请单
    window.eventEmitter.$on('EventCardGetBizSignForm', (data) => {
      // 身份证正面照
      if (data.frontIDCard) {
        self.frontName = data.frontIDCard
        imgTransBase64(data.frontIDCard).then(response => {
          self.frontBase64 = response.data
          self.$set(self.bizCertData, 'frontPhoto', self.frontBase64)
        }).catch(error => {
          console.log(error)
        })
      }
      // 身份证反面照
      if (data.reverseIDCard) {
        self.reverseName = data.reverseIDCard
        imgTransBase64(data.reverseIDCard).then(response => {
          self.reverseBase64 = response.data
          self.$set(self.bizCertData, 'backPhoto', self.reverseBase64)
        }).catch(error => {
          console.log(error)
        })
      }
      // 客户头像
      if (data.cusSceneCard) {
        self.cusSceneName = data.cusSceneCard
        imgTransBase64(data.cusSceneCard).then(response => {
          self.cusSceneBase64 = response.data
          self.$set(self.bizCertData, 'customerPhoto', self.cusSceneBase64)
        }).catch(error => {
          console.log(error)
        })
      }
      // 自证声明
      if (data.cardStateMent) {
        self.cardStateMent = data.cardStateMent
      }
      // 卡正面照
      if (data.frontCardPhoto) {
        self.frontCardPhoto = data.frontCardPhoto
        imgTransBase64(data.frontCardPhoto).then(response => {
          self.frontCardBase64 = response.data
          self.$set(self.bizCertData, 'frontCardPhoto', self.frontCardBase64)
        }).catch(error => {
          console.log(error)
        })
      }
      // 渠道编号
      self.vqid = (Constants.Model.userData && Constants.Model.userData.vqid) || ''
      // ATM转账开通（开通、不开通）
      self.atmOpenTransfer = data.tradInfoList.atmOpenTransfer ? '开通' : '未开通'
      // 互联网在线支付（开通、不开通）
      self.payResult = data.tradInfoList.payResult ? '开通' : '未开通'
      // 电子凭证信息
      self.bizCertData = {
        /** ********************************** 交易信息 *************************************/
        // 客户姓名
        'name': data.customerInfoList.name,
        // 身份证号码
        'idCard': data.customerInfoList.idCard,
        // 电话号码
        'tel': data.customerInfoList.tel,
        // 联系地址
        'address': data.customerInfoList.address,
        // 职业
        'profession': data.customerInfoList.profession,
        // 职业中类
        'professionType': data.customerInfoList.professionType,
        // 正面照
        'frontPhoto': self.frontBase64,
        // 反面照
        'backPhoto': self.reverseBase64,
        // 联网核查结果
        'internetResult': data.customerInfoList.internetResult,
        // 人像比对结果
        'onlineResult': data.customerInfoList.onlineResult,
        // 客户人像
        'customerPhoto': self.cusSceneBase64,
        // 卡正面照
        'frontCardPhoto': self.frontCardBase64,
        // 卡反面照
        // 'reverseCardPhoto': self.reverseCardBase64,
        /** ********************************** 交易信息 *************************************/
        // 卡激活开通标志
        'khflag': data.tradInfoList.khflag,
        // 密码
        'password': data.tradInfoList.password,
        // 户名
        'accountName': data.tradInfoList.accountName,
        // 卡号
        'tradIdCard': data.tradInfoList.idCard,
        // 业务类型
        'businessType': data.tradInfoList.businessType,
        // ATM转账开通
        'atmOpenTransfer': self.atmOpenTransfer,
        // ATM每日转账限额
        'atmLimitTransfer': data.tradInfoList.atmLimitTransfer,
        // 互联网在线支付
        'payResult': self.payResult,
        // 客户承诺
        'customerCommitment': '我自愿在本行激活银行卡功能，确认提供的激活申请资料真实、有效、完整、合法、准确，且已认真阅读《开设个人银行结算账户涉通讯我网络新型违法犯罪法律责任及防范提示告知书》及相关责任条款，并理解、接受全部内容。',
        // 客户签名
        'customerSignature': self.cusSignBase64,
        // 交易日期
        'transactionDate': data.tradInfoList.transactionDate,
        // 客服人员编号
        'managerNum': Constants.Agent.agentId,
        // 客服人员姓名
        'manager': Constants.Agent.agentName
      }
      // 更新交易流水
      self.updateTransPipelineFun(true, false)
    })
  },
  methods: {
    // 步骤条步进
    nextStep(index) {
      this.$emit('nextStep', index)
    },
    // 发起签名
    sendAssignClick() {
      console.log('发起签名')
      globalUserData.sendEventCardResBizSign()
    },
    // 跳转到申请表单页面
    nextStep2() {
      if (window.Settings.nextStepFlag) {
        this.cardAssignFlag = false
      }
      if (this.cardAssignFlag) {
        globalUiKit.notify('提示', '请先执行签名操作！', 'error')
        return
      }
      this.nextStep(1)
      this.isShowFlag = 'two'
      globalUserData.sendEventCardFormStep()
    },
    // 拒绝申请
    bizCertFail() {
      this.dialogFormVisibleFail = true
    },
    // 确认拒绝
    bizCertFailClick() {
      if (!this.failReason) {
        globalUiKit.notify('提示', '拒绝原因不能为空！', 'error')
        return
      }
      this.dialogFormVisibleFail = false
      globalUserData.sendEventCardFail(this.failReason)
      this.updateTransPipelineFun(true, false)
      this.failReason = ''
      this.nextStep(2)
      this.isShowFlag = 'four'
    },
    // 接口失败全局变量控制
    globalBizCertFailReason(message) {
      this.cardActiveFlag = false
      this.dialogVisible = false
      this.failReason = message
      this.nextStep(2)
      this.isShowFlag = 'four'
      globalUserData.sendEventCardFail(this.failReason)
      this.updateTransPipelineFun()
    },
    // 接口失败全局变量控制
    globalBizCertFail(message) {
      this.cardActiveFlag = false
      this.dialogVisible = false
      this.failReason = message
      this.nextStep(2)
      this.isShowFlag = 'four'
      this.updateTransPipelineFun()
    },
    // 电子凭证图片显示
    bizCertSuccess() {
      const self = this
      html2canvas(document.querySelector('#bizVideoHouseCertCanvas'), {
        allowTaint: false
      }).then(function(canvas) {
        console.log('biz cert canvas is: ' + canvas.toDataURL())
        self.dialogVisible = true
        self.bizCertUrl = canvas.toDataURL()
      })
    },
    // 业务确认单提交(卡激活)
    bizFromConfirmAction() {
      // 社保卡激活
      if (this.cardType == '2') {
        this.socialCardActiveFun()
      }
      // IC卡激活
      else {
        this.submitBizFormFun()
      }
    },
    /** ******************************* 社保卡激活 ***************************************/
    socialCardActiveFun() {
      const param = {
        'address': this.bizCertData.address,
        'cardNo': this.bizCertData.tradIdCard,
        'custName': this.bizCertData.name,
        'flag': this.bizCertData.khflag,
        'idCardNo': this.bizCertData.idCard,
        'idCardType': '1',
        'password': this.bizCertData.password,
        'phone': this.bizCertData.tel,
        'onlyTran': '卡激活'
      }
      // 社保卡激活
      socialCardActive(param).then(res => {
        console.log('response social card active data is: ' + JSON.stringify(res))
        if (res.data && res.data.code == 200) {
          this.videoSerialId = res.data.data.hostSerial
          this.tranDate = res.data.data.tranDate
          this.tranTime = res.data.data.tranTime
          this.cardActiveFlag = true
          // 互联网开通
          const params = {
            'acctName': this.bizCertData.name,
            'cardNo': this.bizCertData.tradIdCard,
            'idCardNo': this.bizCertData.idCard,
            'idCardType': '1'
          }
          onlinePayOpen(params).then(dbResponse => {
            const data = dbResponse.data
            console.log('response online pay open data is: ' + JSON.stringify(dbResponse))
            if (data && data.code == 200) {
              globalUserData.sendEventCardSuccess()
              this.openVideoUploadFileFun()
            } else {
              if (!data.message) {
                data.message = 'online pay open failed！'
              }
              this.reasonDescribe = '社保卡激活成功，互联网开通失败！'
              this.globalBizCertFailReason(data.message)
              window.globalUiKit.alert('互联网开通失败', '失败原因：' + data.message + '；入参：' + JSON.stringify(params))
            }
          }).catch(error => {
            console.log(error)
            error = 'online pay open failed！'
            this.reasonDescribe = '社保卡激活成功，互联网开通失败！'
            this.globalBizCertFailReason(error)
            window.globalUiKit.alert('互联网开通失败', '失败原因：' + error + '；入参：' + JSON.stringify(params))
          })
        } else {
          if (!res.data.message) {
            res.data.message = 'social Security card activation failed！'
          }
          this.reasonDescribe = '社保卡激活失败！'
          this.globalBizCertFailReason(res.data.message)
          window.globalUiKit.alert('社保卡激活失败', '失败原因：' + res.data.message + '；入参：' + JSON.stringify(param))
        }
      }).catch(err => {
        console.log(err)
        err = 'social Security card activation failed！'
        this.reasonDescribe = '社保卡激活失败！'
        this.globalBizCertFailReason(err)
        window.globalUiKit.alert('社保卡激活失败', '失败原因：' + err + '；入参：' + JSON.stringify(param))
      })
    },
    /** ******************************* IC卡激活 ***************************************/
    // 提交业务确认单(IC卡激活)
    submitBizFormFun: function() {
      const params = {
        'atmTransferOpnFlg': this.bizCertData.atmOpenTransfer ? '1' : '0',
        'bankCardNo': this.bizCertData.tradIdCard,
        'icCardSerialNo': '1',
        'idCardNo': this.bizCertData.idCard,
        'password': this.bizCertData.password,
        'reservePhoneNum': this.bizCertData.tel,
        'tellerNo': '',
        'thirdPayOpnFlg': this.bizCertData.payResult ? '0' : '1',
        'tradingChannelFlg': '',
        'transactionBranchId': '',
        'transferPerDay': this.bizCertData.atmLimitTransfer,
        'twoTrackInfo': '',
        'onlyTran': '卡激活'
      }
      console.log('request IC card form data: ' + JSON.stringify(params))
      submitBizForm(params).then(response => {
        const data = response.data
        console.log('response IC card form data: ' + JSON.stringify(data))
        if (data.code == 200 && data.data) {
          this.videoSerialId = data.data.CoreSeqNo
          this.tranDate = data.data.tranDate
          this.tranTime = data.data.tranTime
          this.cardActiveFlag = true
          globalUserData.sendEventCardSuccess()
          this.openVideoUploadFileFun()
        } else {
          if (!data.message) {
            data.message = 'IC card activation failed！'
          }
          this.reasonDescribe = 'IC卡激活失败！'
          this.globalBizCertFailReason(data.message)
          window.globalUiKit.alert('IC卡激活失败', '失败原因：' + data.message + '；入参：' + JSON.stringify(params))
        }
      }).catch(error => {
        console.log(error)
        error = 'IC card activation failed！'
        this.reasonDescribe = 'IC卡激活失败！'
        this.globalBizCertFailReason(error)
        window.globalUiKit.alert('IC卡激活失败', '失败原因：' + error + '；入参：' + JSON.stringify(params))
      })
    },
    // 凭证生成影像平台照片
    openVideoUploadFileFun() {
      const bizCertBlob = Utils.dataURLtoBlob(this.bizCertUrl)
      const formData = new FormData()
      formData['enctype'] = 'multipart/form-data'
      formData.append('file', bizCertBlob)
      uploadFile(formData).then(response => {
        console.log('response biz cert link is: ' + response.data)
        this.bizCertName = response.data
        if (window.Settings.imgLinkUploadFlag) {
          this.submitTransImgUploadFun()
        } else {
          this.submitBizCertFun()
        }
      }).catch(error => {
        console.log(error)
        if (window.Settings.imgLinkUploadFlag) {
          this.submitTransImgUploadFun()
        } else {
          this.submitBizCertFun()
        }
      })
    },
    // 上传影像平台
    submitBizCertFun() {
      // 3 文件链接
      const params = {
        'fileInfos': [{
          'fileType': '身份证正面',
          'fileTypeCode': '2601001',
          'fileUrl': this.frontName
        }, {
          'fileType': '身份证反面',
          'fileTypeCode': '2601002',
          'fileUrl': this.reverseName
        }, {
          'fileType': '卡片',
          'fileTypeCode': '2601003',
          'fileUrl': this.frontCardPhoto
        }, {
          'fileType': '客户现场照',
          'fileTypeCode': '2601004',
          'fileUrl': this.cusSceneName
        }, {
          'fileType': '凭证',
          'fileTypeCode': '2601005',
          'fileUrl': this.bizCertName
        }],
        'filePartName': 'ZNKFKJHP',
        'modeCode': 'ZNKFKJH',
        'modelName': '卡激活',
        'sessionId': Constants.ModelChat.sid
      }
      if (this.cardStateMent) {
        params.fileInfos.push({
          'fileType': '自证声明',
          'fileTypeCode': '2601007',
          'fileUrl': this.cardStateMent
        })
      }
      console.log('request submit biz cert data: ' + JSON.stringify(params))
      submitBizCert(params).then(response => {
        const data = response.data
        console.log('response submit biz form data: ' + JSON.stringify(data))
        this.bizCertSeqNo = data.data
        if (data.code == 200) {
          this.cardActiveFlag = true
          this.dialogVisible = false
          this.nextStep(2)
          this.isShowFlag = 'three'
          this.updateTransPipelineFun()
          // globalUserData.sendEventCardSuccess()
        } else {
          if (!data.message) {
            data.message = 'submit biz form failed！'
          }
          this.reasonDescribe = '卡激活成功，提交电子凭证失败！'
          this.globalBizCertFail(data.message)
          globalUiKit.notify('提示', '提交电子凭证失败！', 'error')
        }
      }).catch(error => {
        console.log(error)
        error = 'submit biz form failed！'
        this.reasonDescribe = '卡激活成功，提交电子凭证失败！'
        this.globalBizCertFail(error)
        globalUiKit.notify('提示', '电子凭证接口请求失败！', 'error')
      })
    },
    // 保存影像平台交易流水
    submitTransImgUploadFun() {
      this.dialogVisible = false
      this.nextStep(2)
      this.isShowFlag = 'three'
      this.updateTransPipelineFun(false, true)
    },
    // 记录交易流水
    saveTransPipelineFun: function() {
      const params = {
        'channelType': Constants.ModelChat.chatType,
        'sessionId': Constants.ModelChat.sid,
        'isSatisfaction': '',
        'docidNo': Constants.ModelChat.sid,
        'businessType': '卡激活',
        'idCardType': '身份证',
        'agentNo': Constants.Agent.agentId,
        'agentName': Constants.Agent.agentName,
        'errorMsg': this.failReason,
        'filePartName': 'ZNKFKJHP',
        'modelCode': 'ZNKFKJH',
        'startDate': '',
        'endDate': '',
        'principalName': '',
        'principalIdType': '',
        'principalIdNum': '',
        'unitedSocialCreditNo': ''
      }
      console.log('request save trans pipeline data: ' + JSON.stringify(params))
      saveTransPipeline(params).then(response => {
        const data = response.data
        console.log('response save trans pipeline data: ' + JSON.stringify(data))
        if (data.code == 200) {
          console.log('记录交易流水成功')
          globalUiKit.notify('提示', '视频交易流水记录成功！', 'success')
        } else {
          console.log('记录交易流水失败')
          window.globalUiKit.alert('视频交易流水记录失败', '失败原因：' + data.message + '；入参：' + JSON.stringify(params))
        }
      }).catch(error => {
        console.log(error)
        window.globalUiKit.alert('视频交易流水记录失败', '失败原因：' + error + '；入参：' + JSON.stringify(params))
      })
    },
    // 更新交易流水
    updateTransPipelineFun: function(customerFlag, imgLinkUploadFlag) {
      const params = {
        'sessionId': Constants.ModelChat.sid,
        'transactionDate': this.tranDate,
        'transactionTime': this.tranTime,
        'transactionNo': this.videoSerialId,
        'transactionStatus': this.cardActiveFlag ? '成功' : '失败',
        'errorMsg': this.failReason
      }
      if (customerFlag) {
        params.cardNo = this.bizCertData.tradIdCard
        params.accountName = this.bizCertData.accountName
        params.idCardNo = this.bizCertData.idCard
        params.customerName = this.bizCertData.name
        params.transactionAmount = this.bizCertData.atmLimitTransfer ? this.bizCertData.atmLimitTransfer : 0
      }
      if (imgLinkUploadFlag) {
        params.frontImge = this.frontName
        params.backImge = this.reverseName
        params.csImge = this.cusSceneName
        params.businessImge = this.bizCertName
        params.card = this.frontCardPhoto
        if (this.cardStateMent) {
          params.stcsImge = this.cardStateMent
        }
        params.uploadFlag = 'img'
      }
      console.log('request update trans pipeline data: ' + JSON.stringify(params))
      saveTransPipeline(params).then(response => {
        const data = response.data
        console.log('response update trans pipeline data: ' + JSON.stringify(data))
        if (data.code == 200) {
          console.log('更新交易流水成功')
          globalUiKit.notify('提示', '视频交易流水记录成功！', 'success')
        } else {
          console.log('更新交易流水失败')
          window.globalUiKit.alert('视频交易流水记录失败', '失败原因：' + data.message + '；入参：' + JSON.stringify(params))
        }
      }).catch(error => {
        console.log(error)
        window.globalUiKit.alert('视频交易流水记录失败', '失败原因：' + error + '；入参：' + JSON.stringify(params))
      })
    },
    // 结束交易
    sendEventCardEnd() {
      this.resetGlobalVarible()
      this.isShowFlag = 'five'
      // globalUserData.sendEventCardEnd()
      this.saveTransPipelineFun()
    },
    // 全局变量重置
    resetGlobalVarible: function() {
      this.frontName = ''
      this.reverseName = ''
      this.cusSceneName = ''
      this.bizCertName = ''
      this.cardStateMent = ''
      this.frontCardPhoto = ''
      this.frontBase64 = 'assets/theme/img/viceoBiz/frontPhoto.png'
      this.reverseBase64 = 'assets/theme/img/viceoBiz/reversePhoto.png'
      this.cusSceneBase64 = 'assets/theme/img/viceoBiz/perpr.png'
      this.frontCardBase64 = ''
      this.reverseCardBase64 = ''
      this.bizCertData = {}
      this.bizCertUrl = ''
      this.dialogVisible = false
      this.customerCardInfo = {}
      this.assignHtml = '签名'
      this.cardAssignFlag = true
      // 视频流水号
      this.videoSerialId = ''
      this.bizCertSeqNo = ''
      this.vqid = ''
      this.failReason = ''
      this.dialogFormVisibleFail = false
      this.cardType = ''
      this.cardActiveFlag = false
      this.tranDate = ''
      this.tranTime = ''
      this.atmOpenTransfer = false
      this.payResult = false
      this.sessionId = ''
      this.reasonDescribe = ''
      sessionStorage.removeItem('businessType')
    }
  }
}
</script>
<style scoped>
  .step-box {
    width: 100%;
    margin: 0 auto;
  }

  .font-weight{
    font-weight: bold;
  }

  /************************************* 页面一 *********************************************/
  .mt5 {
    margin-top: 5px;
  }

  .mt15 {
    margin: 15px 0px;
  }

  .custom-id-title {
    text-align: center;
    margin: 15px 0;
  }

  .papers-photo {
    height: 186px;
    width: 274px;
  }

  .papers-photo img {
    height: 100%;
    width: 100%;
  }

  .card-media-photo img {
    height: 100%;
    width: 100%;
  }

  .center {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .peror-photo {
    height: 200px;
    width: 186px;
    overflow: hidden;
  }

  .peror-photo img {
    height: 100%;
    width: 100%;
  }

  .per-result {
    margin: 10px 0;
  }

  /************************************* 页面三 *********************************************/
  .mb10 {
    margin-bottom: 10px;
  }

  .custInfo-box {
    padding: 0px 6%;
  }

  /************************************* 页面四 *********************************************/
  .page-box {
    height: 100%;
    width: 100%;
  }

  .left-box, .right-box {
    height: 750px;
  }

  .paddinglr0 {
    padding-right: 0px !important;
    padding-left: 0px !important;
  }

  .mt10 {
    margin-top: 10px;
  }

  .view-header {
    height: 40px;
    text-align: center;
    line-height: 40px;
    background-color: #f5f7fa;
  }

  .view-middle {
    /*height: 650px;*/
  }

  .view-bottom {
    text-align: center;
    height: 55px;
    line-height: 55px;
  }

  .signNameBox {
    width: 100%;
    height: 225px;
    line-height: 225px;
    border: 1px dashed #ddd;
  }

  /***********************************交易结束********************************************/
  .photo-title {
    padding-top: 20px;
    text-align: center;
  }

  .exceed-photo {
    width: 62px;
    height: 62px;
    margin: 0 auto;
  }

  .photo-box {
    padding-top: 80px;
  }

  .padding-line-height {
    line-height: 26px;
  }

</style>
